﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
<link rel="stylesheet" th:href="@{/css/common.css}">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script th:src="@{/js/jquery.min.js}"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>

	<div style="padding:0px; margin:0px;">
	 <ul class="breadcrumb" style=" margin:0px; padding-left:20px;" >
	  <li>系統管理</li>
	  <li>角色管理</li>
	  <li>角色列表</li>
	</ul>
	</div>
	<form action="" method="POST" class="form-inline" id="editForm">
		<div class="row alert alert-info" style="margin:0px;padding:15px;">
			<div class="form-group">
		    	<label>角色名称：</label>
		    	<input type="text" class="form-control" id="roleName" name="roleName" placeholder="请输入角色名称">
  				<button type="button" class="btn btn-info">查询角色</button>
  				<a th:href="@{/role/add}" class="btn btn-success">添加角色</a>
  				<a id="edit" class="btn btn-primary">修改角色</a>
  				<a id="delete" class="btn btn-danger">删除角色</a>
  			</div>
		</div>
	
	<div class="row" style="padding:15px;">
		<table class="table table-hover table-bordered">
			<tr>
			  <th style="width:5%;">
				<input type="checkbox" onclick="role.checkBoxSelect(this)">
			  </th>
			  <th>角色编号</th>
			  <th>角色名称</th>
			  <th>角色描述</th>
			  <th>操作</th>
			</tr>
			<tr>
			  <td><input type="checkbox" id="ck"></td>
			  <td>1001</td>
			  <td>管理员</td>
			  <td>可以添加删除用户</td>
			  <td>
			  	<button type="button" class="btn btn-primary btn-xs">修改角色</button>
  				<button type="button" class="btn btn-danger btn-xs">删除角色</button>
			  </td>
			</tr>
			<tr>
			  <td><input type="checkbox" id="ck"></td>
			  <td>1001</td>
			  <td>管理员</td>
			  <td>可以添加删除用户</td>
			  <td>
			  	<button type="button" class="btn btn-primary btn-xs">修改角色</button>
  				<button type="button" class="btn btn-danger btn-xs">删除角色</button>
			  </td>
			</tr>
			<tr>
			  <td><input type="checkbox" id="ck"></td>
			  <td>1001</td>
			  <td>管理员</td>
			  <td>可以添加删除用户</td>
			  <td>
			  	<button type="button" class="btn btn-primary btn-xs">修改角色</button>
  				<button type="button" class="btn btn-danger btn-xs">删除角色</button>
			  </td>
			</tr>
			<tr>
			  <td><input type="checkbox" id="ck"></td>
			  <td>1001</td>
			  <td>管理员</td>
			  <td>可以添加删除用户</td>
			  <td>
			  	<button type="button" class="btn btn-primary btn-xs">修改角色</button>
  				<button type="button" class="btn btn-danger btn-xs">删除角色</button>
			  </td>
			</tr>
		</table>
	</div>
	</form>
</body>
<script th:inline="javascript">
	
	$(function(){
		role.init();
	})
	
	var role = {
		init:function(){
			this.editBtn();
			this.deleteBtn();
		},	
		// 编辑按钮绑定单击事件
		editBtn:function(){
			// 角色编辑
			$("#edit").click(function(){
				var ckLength = $("input[id='ck']:checked").length;
				if(ckLength == 1){
					var $form = $("#editForm");
					$form.attr("action","/role/edit");
					$form.submit();
				}else{
					alert("必须选择一条数据编辑（且只能选择一条）");
				}
			});
		},
		// checkbox 全选或者全部选
		checkBoxSelect:function(ck){
			// 获取所有要选中的 checkbox
			var checkboxs = $("input[id='ck']");
			checkboxs.each(function(i){
				this.checked = ck.checked;
			});
		},
		// 删除按钮绑定事件
		deleteBtn:function(){
			$("#delete").click(function(){
				if(confirm("您确定要删除角色吗？")){
					
				}
			});
		}
	};
	
</script>
</html>
